<template>

    <div class="col-md-4">
      <form action="" class="form-horizontal">
        <div class="form-group">
          <label>用户名</label>
          <input type="text" class="form-control" placeholder="用户名" v-model="name">
        </div>
        <div class="form-group">
          <label>评论内容</label>
          <textarea class="form-control" cols="30" rows="6" placeholder="评论内容" v-model="content"></textarea>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-default pull-right" @click="add">提交</button>
          </div>
        </div>
      </form>
    </div>

</template>

<script>
export default {
  name: 'Add',
  props:{ /*在这里声明过的变量就可以和date一样，通过this来访问*/
    addComments:{ /*制定了属性名，制定了属性值的类型、必须性*/
      type:Function ,
      required: true
    }
  },
  data(){
    return {
      name:'',
      content:''
    }
  },
  methods:{
    add(){
      /*自动收集数据*/
      /*1 检查输入的合法性*/
      const name = this.name.trim();
      const content = this.content.trim();
      if (!name || !content){
        alert('姓名或内容不合法')
        return
      }
      /*2 根据输入的数据，封装成一个comment对象*/
      const comments = {
        name,content
      }
      /*3 添加到comments中*/
      this.addComments(comments)
      /*4 清除输入*/
      this.name = '';
      this.content = '';
    }
  }
}
</script>

<style scoped>

</style>
